<template>
	<view class="tabBarList">
		<view class="tabBar" v-for="tabBar in tabBarList" @click="switchTab(tabBar.page_path)" :key="tabBar.id">
			<image :src="tabBarID == tabBar.id ? tabBar.url_1 : tabBar.url_2 "></image>
			<view class="name" :style="{color: (tabBarID == tabBar.id ? '#c8aaa9' : '#bfbfbf')}">{{tabBar.name}}</view>
		</view>
	</view>
</template>

<script>
	import {getGlobalData, Request} from '../util.js';
	import store from '@/store/index.js'; //引入store
	import tabBar from "@/custom-tab-bar/index.vue";
	
	const domain = getGlobalData('domain');

	
	
	export default {
		created() {
			Request(domain+"/client/image/getTabBar").then((res)=>{
				this.tabBarList = res.data.data;
			})
		},
		updated() {
			
		},
		mounted(){
			
		},
		onShow(){
			
		},
		watch:{
			// tabBarID(newVal, oldVal){
			// 	console.log(newVal,oldVal);
			// }
		},
		computed:{
			tabBarID(){
				return this.$store.state.tabBarID
			}
		},
		methods:{
			switchTab(url){
				
				uni.switchTab({
				    url:url
				})
			}
		},
		data() {
			return {
				tabBarList:[],
			};
		}
	}
</script>

<style lang="less" scoped>
	.tabBarList{
		padding-bottom: env(safe-area-inset-bottom);
		width:100%;
		bottom:0;
		height: 95rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		flex-direction: row;
		background-color:#fff;
		.tabBar{
			width:20%;
			height:100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width:55rpx;
				height:55rpx;
			}
			.name{
				font-size: 20rpx;
				color: #bfbfbf;
			}
		}
	}
</style>
